<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix='fmt'%>
<div class="row" style="margin:100px 0px;">

	<div class="col-xs-3"></div>
	<div class="col-xs-4">
			<form id="subIndexForm">
		<table class="table table-hover">
			<thead style="background-color:#337AB7;">
				<th>排序</th>
				<th>主分类</th>
			</thead>
			<tbody style="border-width:1px;border-style:solid;border-color:#337AB7;">
				<tr>
					<td><input  type="hidden" value="1" name="id">1</td>
					<td>
						<select  name="maintype" class="selectpicker" data-style="btn-primary">
						<option value="">请选择（不选择则展示不展示该模块）</option>
						<c:forEach items="${mainTypes}" var="mianType" varStatus="st">
							<option value="${mianType.id}">${mianType.descri}</option>
    					</c:forEach>
    					</select>
					</td>
				</tr>
				<tr>
					<td><input id="id" type="hidden" value="2" name="id">2</td>
					<td>
						<select  name="maintype" class="selectpicker" data-style="btn-primary">
						<option value="">请选择（不选择则展示不展示该模块）</option>
						<c:forEach items="${mainTypes}" var="mianType" varStatus="st">
							<option value="${mianType.id}">${mianType.descri}</option>
    					</c:forEach>
    					</select>
					</td>
				</tr>
				<tr>
					<td><input id="id" type="hidden" value="3" name="id">3</td>
					<td>
						<select  name="maintype" class="selectpicker" data-style="btn-primary">
						<option value="">请选择（不选择则展示不展示该模块）</option>
						<c:forEach items="${mainTypes}" var="mianType" varStatus="st">
							<option value="${mianType.id}">${mianType.descri}</option>
    					</c:forEach>
    					</select>
					</td>
				</tr>
				<tr>
					<td><input id="id" type="hidden" value="4" name="id">4</td>
					<td>
						<select  name="maintype" class="selectpicker" data-style="btn-primary">
						<option value="">请选择（不选择则展示不展示该模块）</option>
						<c:forEach items="${mainTypes}" var="mianType" varStatus="st">
							<option value="${mianType.id}" class="tip" data-placement="right" title="这将影响到首页排版效果，请勿频繁更改！">${mianType.descri}</option>
    					</c:forEach>
    					</select>
					</td>
				</tr>
				<tr>
					<td><input id="id" type="hidden" value="5" name="id">5</td>
					<td>
						<select  name="maintype" class="selectpicker" data-style="btn-primary">
						<option value="">请选择（不选择则展示不展示该模块）</option>
						<c:forEach items="${mainTypes}" var="mianType" varStatus="st">
							<option value="${mianType.id}">${mianType.descri}</option>
    					</c:forEach>
    					</select>
					</td>
				</tr>
			</tbody>
		</table>
		</form>
		<button id="btn-subIndex" class="btn btn-primary" data-toggle="tooltip" data-placement="right" title="这将影响到首页排版效果，请勿频繁更改！">提交</button>
	</div>
</div>
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
$("#btn-subIndex").click(function(){
	var showIndexs  = JSON.parse($("#subIndexForm").serializeJson());
	var jsonData = JSON.stringify(showIndexs);
	$.ajax({
		url:"admin_subIndex_subShowIndex",
		data:jsonData,
		type:"post",
		contentType : "application/json;charset=UTF-8",
		success:function(data){
			if(data=='SUCCESS'){
				alert("排版成功!");
			}
		}
	});
	
});
</script>
<script>
//form序列化，转成json的list
$.fn.serializeJson = function(){
    var jsonData1 = {};
    var serializeArray = this.serializeArray();
    // 先转换成{"id": ["12","14"], "name": ["aaa","bbb"], "pwd":["pwd1","pwd2"]}这种形式
    $(serializeArray).each(function () {
        if (jsonData1[this.name]) {
            if ($.isArray(jsonData1[this.name])) {
                jsonData1[this.name].push(this.value);
            } else {
                jsonData1[this.name] = [jsonData1[this.name], this.value];
            }
        } else {
            jsonData1[this.name] = this.value;
        }
    });
    // 再转成[{"id": "12", "name": "aaa", "pwd":"pwd1"},{"id": "14", "name": "bb", "pwd":"pwd2"}]的形式
    var vCount = 0;
    // 计算json内部的数组最大长度
    for(var item in jsonData1){
        var tmp = $.isArray(jsonData1[item]) ? jsonData1[item].length : 1;
        vCount = (tmp > vCount) ? tmp : vCount;
    }

    if(vCount > 1) {
        var jsonData2 = new Array();
        for(var i = 0; i < vCount; i++){
            var jsonObj = {};
            for(var item in jsonData1) {
                jsonObj[item] = jsonData1[item][i];
            }
            jsonData2.push(jsonObj);
        }
        return JSON.stringify(jsonData2);
    }else{
        return "[" + JSON.stringify(jsonData1) + "]";
    }
};
</script>
